layui.use(['table', 'form', 'element', 'upload'], function () {
    let table = layui.table,
        form = layui.form,
        $ = layui.jquery,
        element = layui.element,
        upload = layui.upload
    ;
    let msg = null
    const importImages = upload.render({
        elem: '#chooseList'
        , elemList: $('#fileList') //列表元素对象
        , url: '/totalOverview/importJarImages'
        , accept: 'file' //普通文件
        , multiple: true
        , exts: 'tar' // 限制文件类型为 tar
        , auto: false
        , bindAction: '#uploadAction'
        , choose: function (obj) {
            var that = this;
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
                var size = changeSize(file.size);
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td>' + file.name + '</td>'
                    , '<td>' + size + '</td>'
                    , '<td class="statusName">待上传</td>'
                    , '<td><div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="progress-file-' + index + '"><div class="layui-progress-bar layui-btn-blue" lay-percent="0%"></div></div></td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-xs file-reload layui-hide">重传</button>'
                    , '<button class="layui-btn layui-btn-xs layui-btn-danger file-delete">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));

                //单个重传
                tr.find('.file-reload').on('click', function () {
                    obj.upload(index, file);
                });

                //删除
                tr.find('.file-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    importImages.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                that.elemList.append(tr);
                element.render('progress'); //渲染新加的进度条组件
            });
        },
        before: function () {
            this.data = {
                projectId: $("#projectId").val(),
                namespaceId: $("#namespaceId").val()
            }
            msg = layer.msg("开始导入镜像，请稍后...", {icon: 1, time: false}, function () {
            })
        },
    });
    $(function () {
        uploadWebsocket()
    })

    //日志实时更新
    function uploadWebsocket() {
        //websocket对象
        let websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + sessionStorage.getItem('hostName') + "/websocket/logging");
        } else {
            console.error("不支持WebSocket");
        }
        //连接发生错误的回调方法
        websocket.onerror = function (e) {
            console.error("WebSocket连接发生错误", e);
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("WebSocket连接成功")
        };
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            //追加
            if (event.data) {
                let data = $.parseJSON(event.data);
                if (data.table == "importJarImages") {
                    $("#fileList").find("tr").each(function () {
                        const id = $(this).attr("id")
                        const index = id.replace("upload-", "")
                        const filename = $(this).find("td").eq(0).text();
                        if (filename == data.name) {
                            if (data.speedOfProgress != null && data.speedOfProgress != '') {
                                element.progress('progress-file-' + index, data.speedOfProgress); //执行进度条。n 即为返回的进度百分比
                            }
                            let html = "";
                            if ("complete" == data.status) {
                                html = "<span style='color: seagreen'>推送成功</span>"
                                layer.close(msg);
                            }
                            if ("loading" == data.status) {
                                html = "<span style='color: #760f8d'>加载镜像中</span>"
                            }
                            if ("uploading" == data.status) {
                                html = "<span style='color: #1a84d5'>uploading</span>"
                            }
                            $(this).find("td").eq(2).html(html);
                            element.render()
                        }
                    })
                }
            }
        };
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("WebSocket连接关闭")
        };
    }


})